<template>
	<view>
		<appBar title="人员数据" :right-icon="'search'" :showRight="true" @rightClick="search"></appBar>
		<view>
			<uvDropdown :order="order" :resultMenu="result" :defaultValue="defaultValue">
				<view class="rowCenter">
					<calendarBtnVue class="cloumCenter" solt="defult" :className="'fontWeight'" mode="range" />
					<uv-icon name="arrow-down-fill"></uv-icon>
				</view>
			</uvDropdown>
		</view>
		<view class="rowSpaceAround w100 static">
			<view v-for="(item,index) in predict" :key="index" class="rowSpaceAround w45">
				<view>
					<text class="fontWeight"> {{item.title}}: </text>
					<text class="staticContent fontWeight">{{item.value?item.value:0}}{{item.unit}}</text>
				</view>
			</view>
		</view>
		<view style="padding: 20rpx;">
			<collapseTopVue :mode="'top'" :showIdent="true" :index='index' :items="item"
				v-for="(item,index) in prediceList" :key="item.id" />
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import collapseTopVue from '../homecomponents/collapseTop.vue';
	import calendarBtnVue from '@/components/calendarBtn/calendarBtn.vue';
	import uvDropdown from "@/components/uvDropdown/uvDropdown.vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 获取api方法
	import {
		predictListApi,
		getPredictApi
	} from '@/api/agentApi/predict.js'
	import {
		transformDataStructure,
		dataList
	} from '@/untils/predictDataUtils.js'

	let defaultValue = ref([0, 'all', '0'])
	let result = reactive([{
		name: 'order',
		label: '最新发布',
		value: 'new'
	}])

	let order = ref({
		label: '全部人员',
		value: 'all',
		activeIndex: 0,
		color: '#333',
		activeColor: '#fb5f46',
		child: [{
				label: '全部人员',
				value: 'all'
			},
			{
				label: '合伙人',
				value: 'new'
			},
			{
				label: '代理商',
				value: 'money'
			}
		]
	})

	// 顶部金额显示
	const predict = reactive([{
		key: 'tradeQuantity',
		title: '交易笔数',
		unit: '笔'
	}, {
		key: 'tradeAmount',
		title: '交易金额',
		unit: '元'
	}])
	// 获取用户佣金
	const getPredict = async () => {
		let res = await getPredictApi()
		allocationHandler(res.data, predict)
	}


	
	// 佣金列表
	let prediceList = ref()
	// 获取佣金列表的参数
	let getPredictInfo = reactive({
		endTime: '',
		isAsc: '',
		nickName: '',
		pageNum: 1,
		pageSize: 10,
		parentUserId: '',
		startTime: '',
		userIds: []
	})

	// 获取佣金列表
	const predictList = async () => {
		let res = await predictListApi(getPredictInfo)
		prediceList.value = transformDataStructure(res.data.list, dataList)
	}

	// 去搜索
	const search = () => {
		uni.navigateTo({
			url: '/pages/tabbar/home/homeSearch/homeSearch'
		})
	}

	// 页面加载
	onLoad(() => {
		predictList()
	})
</script>
<style scoped lang="scss">
	.static {
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		background-color: var(--themeBackground);
		font-size: 28rpx;

		.staticContent {
			color: var(--themeDefultFontColor);
		}
	}
</style>